<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1">
		<title>我的伙伴</title>
		<link rel="stylesheet" th:href="@{/css/jquery.mobile-1.4.5.min.css }"/>
		<script th:src="@{/js/jquery.min.js}"></script>
		<script th:src="@{/js/jquery.mobile-1.4.5.min.js}"></script>
		<link rel="stylesheet" th:href="@{/css/iconfont.css}"/>
		<script>
			$(document).ready(function(){
				$("#experience").bind('swipeleft', function() {
					$.mobile.changePage("#jian", { transition: "slide"},true);
				});
				$("#jian").bind('swiperight', function() { 
				  $.mobile.changePage("#experience", {transition: "slide", reverse:true},false); 
				}).bind('swipeleft', function() { 
				   $.mobile.changePage("#zuji", { transition: "slide"},true); 
				});
				 $("#zuji").bind('swiperight', function() {
				 	$.mobile.changePage("#jian", {transition: "slide", reverse:true},true, true);
				 });
			});
		function Exhuxian(){
			var img = document.getElementById('upLoadImg');
			var input = document.getElementById('myImage');
			 var file = input.files[0];
			  ImgToBase64(file, 720, function (base64) {
					img.setAttribute('src', base64)
			 　　　　sessionStorage.setItem("EXbase64",base64);
			  });
		}
		function ImgToBase64(file, maxLen, callBack) {
		    var img = new Image();
			var reader = new FileReader();
		    reader.onload = function () {
		        var url = reader.result;
		        img.src = url;
		    };
		    img.onload = function () {
		        var width = img.width, height = img.height;
		        var rate = 1;
		        if (width >= height) {
		            if (width > maxLen) {
		                rate = maxLen / width;
		            }
		        } else {
		            if (height > maxLen) {
		                rate = maxLen / height;
		            }
		        };
		        img.width = width * rate;
		        img.height = height * rate;
		        var canvas = document.createElement("canvas");
		        var ctx = canvas.getContext("2d");
		        canvas.width = img.width;
		        canvas.height = img.height;
		        ctx.drawImage(img, 0, 0, img.width, img.height);
		        var base64 = canvas.toDataURL('image/jpeg', 0.9);
		        callBack(base64);
		    };
		    reader.readAsDataURL(file);
		}
		function bhuxian(){
			var img = document.getElementById('bupLoadImg');
			var input = document.getElementById('bImage');
			 var file = input.files[0];
			  ImgToBase64(file, 720, function (base64) {
					img.setAttribute('src', base64)//预览页面上预留一个img元素，载入base64
					//$("#upLoadImg")[0].width = 300;//设定宽高，不然会自动按照压缩过的图片宽高设定，有可能超出预想的范围。
			 　　　　sessionStorage.setItem("Bbase64",base64);//直接利用ajax上传base64到服务器，完毕
			  });
		}
		function shuxian(){
			var img = document.getElementById('supLoadImg');
			var input = document.getElementById('sImage');
			 var file = input.files[0];
			  ImgToBase64(file, 720, function (base64) {
					img.setAttribute('src', base64)//预览页面上预留一个img元素，载入base64
					//$("#upLoadImg")[0].width = 300;//设定宽高，不然会自动按照压缩过的图片宽高设定，有可能超出预想的范围。
			 　　　　sessionStorage.setItem("Sbase64",base64);//直接利用ajax上传base64到服务器，完毕
			  });
		}
		function Exsent(){
			var EXbase64=sessionStorage.getItem("EXbase64");
			var user=JSON.parse(window.sessionStorage.getItem("user"));
			var userid=user.userid;
			console.log(EXbase64);
			var base64Ex;
			if(EXbase64!=null){
				base64Ex = EXbase64.split(',')[1];
			}else{
				base64Ex="wutu";
			}
			console.log(base64Ex)
			var eTitle=$("#eTitle").val();
			var eContent=$("#eContent").val();
			console.log(eContent);
			if(eTitle==""){
				$("#TitleIsNull").popup('open');
			}else{
				var data1={'userid': userid , "base64Ex" : base64Ex , "eTitle": eTitle , "eContent" : eContent};
				$.post("/ExperiecneCotroller/addExperience",data1, function (result) {
					if(result=="success"){
						window.location = "/ViewController/toMy";
					}else{
						console.log("失败");
					}
				});
			}
			
		}
		function bsent(){
			var Bbase64=sessionStorage.getItem("Bbase64");
			var user=JSON.parse(window.sessionStorage.getItem("user"));
			var userid=user.userid;
			console.log(Bbase64);
			var base64;
			var bName=$("#bName").val();
			var introduce=$("#introduce").val();
			if(Bbase64!=null){
				base64 = Bbase64.split(',')[1];
			}else{
				base64="wutu";
			}
			if(bName==""){
				$("#BNisNull").popup('open');
			}else{
				var data1={'userid': userid , "base64" : base64 , "bName": bName , "introduce" : introduce};
				$.post("/BookController/addBook",data1, function (result) {
					if(result=="success"){
						console.log("success");
						window.location = "/ViewController/toMy";
					}else{
						console.log("失败");
					}
				});
			}
			
		}
		function ssent(){
			var sType= document.getElementById("sType").value;
			var Sbase64=sessionStorage.getItem("Sbase64");
			var user=JSON.parse(window.sessionStorage.getItem("user"));
			var userid=user.userid;
			console.log(Sbase64);
			var base64;
			var sTitle=$("#sTitle").val();
			var sContent=$("#sContent").val();
			if(Sbase64!=null){
				base64 = Sbase64.split(',')[1];
			}else{
				base64="wutu";
			}
			if(sTitle==""){
				$("#StitleIsNull").popup('open');
			}else{
				var data1={'userid': userid , "base64" : base64 , "sTitle": sTitle , "sContent" : sContent,"sType" : sType};
				$.post("/ShowMeController/addShow",data1, function (result) {
					if(result=="success"){
						console.log("success");
						window.location = "/ViewController/toMy";
					}else{
						console.log("失败");
					}
				});
			}
			
		}
		function close1(){
			$("#TitleIsNull").popup('close');
		}
		function close2(){
			$("#BNisNull").popup('close');
		}
		function close3(){
			$("#StitleIsNull").popup('close');
		}
		</script>
	</head>
	<body>
		<div data-role="page" id="experience">
			<div data-role="header" data-fullscreen="true">
				<a href="/ViewController/toMy" data-icon="back" data-ajax="false">返回</a>
				<h1>发布我的成长轨迹</h1>
			</div>
			<div data-role="content">
				<form data-ajax="false">
					<h3>标题：</h3>
					<input type="text" name="eTitle" id="eTitle" />
					<h3>内容：</h3>
					<textarea type="text" name="eContent" id="eContent"></textarea>
					<h3>图片：</h3>
					<!-- <input type="file" name="file" id="file" accept="image/jpeg,image/png,image/jpg,image/gif" οnchange="uploadImage();"/>
					<img id="img" src="image/20155516431932.jpg" style="width:300px"/>
					<input type="hidden" name="path" id="pic"  > -->
					<input type="file" id="myImage" name="myImage" onchange="Exhuxian()" accept="image/*" />
					<img id="upLoadImg" width="50%" />
				</form>
				<div data-role="popup" id="TitleIsNull" class="ui-content">
					<a href="#" data-role="button" data-icon="delete" data-iconpos="notext" class="ui-btn-right" onclick="close1()">Close</a>
					<div>标题不能为空</div>
				</div>
				<a href="#" data-role="button" onclick="Exsent()" data-ajax="false">发布</a>
			</div>
			
		</div>

		<div data-role="page" id="jian">
			<div data-role="header" data-fullscreen="true">
				<a href="/ViewController/toMy" data-icon="back" data-ajax="false">返回</a>
				<h1>发布我的推荐</h1>
			</div>
			<div data-role="content">
				<form data-ajax="false">
					<h3>书名：</h3>
					<input type="text" name="bName" id="bName" />
					<h3>介绍：</h3>
					<textarea type="text" name="introduce" id="introduce"></textarea>
					<h3>封面：</h3>
					<!-- <input type="file" name="file" id="file" accept="image/jpeg,image/png,image/jpg,image/gif" οnchange="uploadImage();"/>
					<img id="img" src="image/20155516431932.jpg" style="width:300px"/>
					<input type="hidden" name="path" id="pic"  > -->
					<input type="file" id="bImage" name="bImage" onchange="bhuxian()" accept="image/*" />
					<img id="bupLoadImg" width="50%" />
				</form>
				<div data-role="popup" id="BNisNull" class="ui-content">
					<a href="#" data-role="button" data-icon="delete" data-iconpos="notext" class="ui-btn-right" onclick="close2()">Close</a>
					<div>书名不能为空</div>
				</div>
				<a href="#" data-role="button" onclick="bsent()" data-ajax="false">发布</a>
			</div>
		</div>

		<div data-role="page" id="zuji">
			<div data-role="header" data-fullscreen="true">
				<a href="/ViewController/toMy" data-icon="back" data-ajax="false">返回</a>
				<h1>发布我的展示</h1>
			</div>
			<div data-role="content">
				<form data-ajax="false">
					<h3>阶段:</h3>
					<select id="sType">
						<option value="1">上学前</option>
						<option value="2">幼儿园</option>
						<option value="3">小学</option>
						<option value="4">初中</option>
						<option value="5">高中</option>
						<option value="6">大学</option>
					</select>
					<h3>标题：</h3>
					<input type="text" name="sTitle" id="sTitle" />
					<h3>详细：</h3>
					<textarea type="text" name="sContent" id="sContent"></textarea>
					<h3>图片：</h3>
					<!-- <input type="file" name="file" id="file" accept="image/jpeg,image/png,image/jpg,image/gif" οnchange="uploadImage();"/>
					<img id="img" src="image/20155516431932.jpg" style="width:300px"/>
					<input type="hidden" name="path" id="pic"  > -->
					<input type="file" id="sImage" name="sImage" onchange="shuxian()" accept="image/*" />
					<img id="supLoadImg" width="50%" />
				</form>
				<div data-role="popup" id="StitleIsNull" class="ui-content">
					<a href="#" data-role="button" data-icon="delete" data-iconpos="notext" class="ui-btn-right" onclick="close3()">Close</a>
					<div>标题不能为空</div>
				</div>
				<a href="#" data-role="button" onclick="ssent()" data-ajax="false">发布</a>
			</div>
		</div>
	</body>
</html>
